<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'

import { imageUrl } from '@/utils/imageUrl'
// 假设 contentData 是从其他地方导入的数据
import { contentData, contentDataEnglish } from '@/assets/js/产品.js'
import { lStorage } from '@/utils/storage'

import { useRouter } from 'vue-router'
const router = useRouter()

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// 响应式状态
const tabs = ref(
	lStorage.get('language') === 'zh' ? contentData : contentDataEnglish
)

const isPC = ref(false)

watch(
	() => lStorage.getReactive().value.language,
	(newVal) => {
		if (newVal === 'zh') {
			tabs.value = contentData
		} else {
			tabs.value = contentDataEnglish
		}
	}
)

const activeTab = ref('')
const observer = ref(null)

const isStartScrolling = ref(true)

// 监听标题的变化
watch(
	() => lStorage.getReactive().value.WX_ACTIVE_TAB,
	(newVal) => {
		nextTick(() => {
			const tab = newVal.split('/').filter(Boolean)
			if (newVal.includes('Product') && tab.length > 1) {
				activeTab.value = tab[1]
			}
		})
	},
	{ immediate: true, deep: true } // 添加 immediate 选项处理初始值
)

// 监听标题的变化
watch(
	() => lStorage.getReactive().value.isStartScrolling,
	(newVal) => {
		nextTick(() => {
			isStartScrolling.value = newVal
		})
	},
	{ immediate: true, deep: true } // 添加 immediate 选项处理初始值
)

const setupIntersectionObserver = () => {
	if (observer.value) observer.value.disconnect()

	// 添加延迟确保元素存在
	setTimeout(() => {
		const targets = tabs.value
			.map((tab) => document.getElementById(tab.id))
			.filter(Boolean)

		if (targets.length === 0) {
			return
		}

		observer.value = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						lStorage.set('temporaryPath', entry.target.id)
						lStorage.set('isStartScrolling', false)
					}
				})
			},
			{
				root: null,
				rootMargin: '-40px 0px -60% 0px',
				threshold: 0.01,
			}
		)

		targets.forEach((el) => {
			console.log('Observing element:', el.id) // 调试用
			observer.value.observe(el)
		})
	}, 0) // 100ms 延迟
}

let isScrolling = false
watch(activeTab, (newVal, oldVal) => {
	if (isStartScrolling.value) {
		if (isScrolling || newVal === oldVal) return

		isScrolling = true
		nextTick(() => {
			const target = document.getElementById(newVal)
			target.style.scrollMarginTop = isPC.value ? `300px` : '20px' // 动态设置
			target?.scrollIntoView({
				behavior: 'smooth',
				block: 'start',
				inline: 'nearest',
			})

			setTimeout(() => (isScrolling = false), 500)
		})
	}
})
// AOS 初始化 + 滚动锚点处理
onMounted(async () => {
	await nextTick(() => {
		// 新锚点处理逻辑
		document.querySelectorAll('a[data-anchor]').forEach((anchor) => {
			anchor.addEventListener('click', function (e) {
				e.preventDefault()
			})
		})

		setTimeout(() => {
			// 检查 URL 或存储中的初始状态
			const initialTab = lStorage.get('temporaryPath') || ''
			if (initialTab) {
				activeTab.value = initialTab
			}
		}, 0)
		setupIntersectionObserver()
	}) // 等待下一个 tick 确保 DOM 更新

	// 判断设备类型（可根据需求调整阈值）
	isPC.value = window.matchMedia('(min-width: 992px)').matches
	// 监听窗口变化
	window.addEventListener('resize', () => {
		isPC.value = window.matchMedia('(min-width: 992px)').matches
	})

	// 滚动时高亮当前章节对应的导航按钮
	window.addEventListener('scroll', function () {
		const sections = document.querySelectorAll('.section')
		const navBtns = document.querySelectorAll('.nav-btn')

		let current = ''

		sections.forEach((section) => {
			const sectionTop = section.offsetTop - 200
			const sectionHeight = section.offsetHeight
			if (
				window.pageYOffset >= sectionTop &&
				window.pageYOffset < sectionTop + sectionHeight
			) {
				current = section.getAttribute('id')
			}
		})

		navBtns.forEach((btn) => {
			btn.classList.remove('active')
			if (btn.getAttribute('data-target') === current) {
				btn.classList.add('active')
			}
		})
	})

	// 点击导航按钮时的平滑滚动
	document.querySelectorAll('.nav-btn').forEach((btn) => {
		btn.addEventListener('click', function (e) {
			e.preventDefault()
			const target = document.querySelector(this.getAttribute('href'))
			const headerHeight = 140 // 头部和导航的总高度
			const targetPosition = target.offsetTop - headerHeight

			window.scrollTo({
				top: targetPosition,
				behavior: 'smooth',
			})
		})
	})

	// 页面加载完成后的入场动画
	window.addEventListener('load', function () {
		document.querySelectorAll('.nav-btn').forEach((btn, index) => {
			setTimeout(() => {
				btn.style.opacity = '1'
				btn.style.transform = 'translateY(0)'
			}, index * 100)
		})
	})
})

// 清理 Observer
onBeforeUnmount(() => {
	if (observer.value) {
		observer.value.disconnect()
	}
})

const onJump = (item) => {
	if (!isPC.value) return
	if (item.path && item.type !== '_black') {
		router.push(item.path)
	} else if (item.path && item.type === '_black') {
		window.open(item.path, '_blank')
	}
}
</script>

<template>
	<div class="product-container">
		<div class="quick-nav" v-if="isPC">
			<div class="quick-nav-container">
				<div class="nav-title">{{ t('Products.nav') }}</div>
				<div class="nav-buttons">
					<a
						:href="`#${item.id}`"
						class="nav-btn"
						:data-target="item.id"
						v-for="(item, index) in tabs"
						:key="index"
					>
						<div class="nav-btn-icon"></div>
						<div class="nav-btn-text">
							<div class="nav-btn-title">{{ item.title }}</div>
							<div class="nav-btn-subtitle">{{ item.id }}</div>
						</div>
					</a>
				</div>
			</div>
		</div>
		<div class="product-layout">
			<div class="products-content">
				<div
					class="products section"
					v-for="(item, index) in tabs"
					:key="index"
					:id="item.id"
				>
					<!-- 主标题部分 -->
					<section class="product-section">
						<div class="container">
							<h2 class="section-title">
								{{ item.title }}
							</h2>
							<div class="service-text">
								<p>{{ item.content }}</p>
							</div>
						</div>
					</section>

					<!-- 产品卡片部分 -->
					<template v-for="(items, i) in item.children" :key="i">
						<template v-if="items.children">
							<!-- 子分类标题 -->
							<div class="subcategory-header">
								<div class="container">
									<h3>{{ items.title }}</h3>
									<p>{{ items.content }}</p>
								</div>
							</div>
							<!-- 子分类下的产品卡片 -->
							<div
								class="product-card"
								v-for="(n, m) in items.children"
								:key="m"
								:class="{ reverse: m % 2 === 1 }"
							>
								<div
									class="product-content"
									:class="{ reverse: m % 2 === 1 }"
									@click="onJump(n)"
								>
									<div class="product-info">
										<h3>{{ n.title }}</h3>
										<p>{{ n.content }}</p>
									</div>
									<img
										:src="imageUrl(n.imgSrc, '产品模块')"
										class="product-image"
										:alt="n.title"
										loading="lazy"
									/>
								</div>
							</div>
						</template>

						<template v-else>
							<!-- 直接的产品卡片 -->
							<div class="product-card" :class="{ reverse: i % 2 === 1 }">
								<div
									class="product-content"
									:class="{ reverse: i % 2 === 1 }"
									@click="onJump(items)"
								>
									<div class="product-info">
										<h3>{{ items.title }}</h3>
										<p>{{ items.content }}</p>
									</div>
									<img
										:src="imageUrl(items.imgSrc, '产品模块')"
										class="product-image"
										:alt="items.title"
										loading="lazy"
									/>
								</div>
							</div>
						</template>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 产品模板页面样式 - Product/Template.vue
 * ===========================================
 */

// 为了解决锚点定位时，头部遮挡内容的问题
:target {
	scroll-margin-top: 230px !important;
}

/* 产品容器 */
.product-container {
	background: var(--content-bg);
	min-height: 100vh;
}

/* 快速导航 */
.quick-nav {
	position: sticky;
	top: var(--space-20);
	height: fit-content;
	width: 1200px;
	box-sizing: border-box;
	max-width: calc(100vw - var(--space-8));
	flex-shrink: 0;
	background: var(--card-bg);
	border-radius: var(--radius-2xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--card-border);
	margin: 0 auto var(--space-8);
	z-index: 999;

	.quick-nav-container {
		.nav-title {
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-bold);
			color: var(--text-primary);
			margin-bottom: var(--space-4);
			text-align: center;
		}

		.nav-buttons {
			display: grid;
			gap: var(--space-3);
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

			.nav-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: var(--space-2);
				padding: var(--space-4) var(--space-3);
				border-radius: var(--radius-xl);
				text-decoration: none;
				transition: all var(--transition-base);
				color: var(--text-primary);
				background: rgba(255, 255, 255, 0.5);
				border: 1px solid var(--gray-200);
				text-align: center;

				&:hover,
				&.active {
					background: var(--brand-primary);
					color: var(--color-white);
					transform: translateY(-2px);
					box-shadow: var(--shadow-md);
					border-color: var(--brand-primary);
				}

				.nav-btn-icon {
					width: 6px;
					height: 6px;
					border-radius: var(--radius-full);
					background: currentColor;
					flex-shrink: 0;
					opacity: 0.7;
				}

				.nav-btn-text {
					flex: 1;

					.nav-btn-title {
						font-size: var(--font-size-sm);
						font-weight: var(--font-weight-medium);
						line-height: var(--line-height-tight);
						color: inherit;
						margin-bottom: var(--space-1);
					}

					.nav-btn-subtitle {
						font-size: var(--font-size-xs);
						color: currentColor;
						opacity: 0.6;
						text-transform: uppercase;
						font-weight: var(--font-weight-medium);
					}
				}
			}
		}
	}
}

/* 产品布局 */
.product-layout {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	gap: var(--space-8);
	padding: 0 var(--space-6) var(--space-20);
}

/* 产品内容容器 */
.products-content {
	flex: 1;
	min-width: 0; /* 允许内容缩小 */
}

/* 产品区域 */
.products {
	padding: 0; /* 移除原有的padding，因为父容器已经有了 */

	.product-section {
		text-align: center;
		margin-bottom: var(--space-16);

		.container {
			max-width: 800px;
			margin: 0 auto;

			.section-title {
				font-size: var(--font-size-3xl);
				font-weight: var(--font-weight-bold);
				color: var(--brand-primary);
				margin-bottom: var(--space-6);
				line-height: var(--line-height-tight);
			}

			.service-text {
				p {
					font-size: var(--font-size-lg);
					color: var(--text-primary);
					line-height: var(--line-height-relaxed);
					margin: 0;
				}
			}
		}
	}

	.subcategory-header {
		text-align: center;
		margin-bottom: var(--space-12);
		padding: var(--space-8) 0;
		border-top: 1px solid var(--gray-200);

		.container {
			max-width: 600px;
			margin: 0 auto;

			h3 {
				font-size: var(--font-size-2xl);
				font-weight: var(--font-weight-bold);
				color: var(--brand-primary);
				margin-bottom: var(--space-4);
				line-height: var(--line-height-tight);
			}

			p {
				font-size: var(--font-size-base);
				color: var(--text-primary);
				line-height: var(--line-height-relaxed);
				margin: 0;
			}
		}
	}

	.product-card {
		background: var(--card-bg);
		border-radius: var(--radius-2xl);
		padding: var(--space-8);
		margin-bottom: var(--space-12);
		box-shadow: var(--shadow-base);
		border: 1px solid var(--card-border);
		transition: all var(--transition-base);

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-lg);
		}

		&:last-child {
			margin-bottom: 0;
		}

		.product-content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-12);
			align-items: center;
			cursor: pointer;

			&.reverse {
				.product-info {
					order: 2;
				}
				.product-image {
					order: 1;
				}
			}
		}

		.product-info {
			h3 {
				font-size: var(--font-size-2xl);
				font-weight: var(--font-weight-bold);
				color: var(--brand-primary);
				margin-bottom: var(--space-4);
				line-height: var(--line-height-tight);
			}

			p {
				font-size: var(--font-size-lg);
				color: var(--text-primary);
				line-height: var(--line-height-relaxed);
				margin: 0;
			}
		}

		.product-image {
			width: 100%;
			height: auto;
			height: 320px;
			object-fit: initial;
			border-radius: var(--radius-xl);
			box-shadow: var(--shadow-md);
			transition: all var(--transition-base);

			&:hover {
				transform: scale(1.02);
				box-shadow: var(--shadow-lg);
			}
		}
	}
}

/* 响应式设计 */
@media (max-width: var(--breakpoint-lg)) {
	.quick-nav {
		width: calc(100vw - var(--space-8));
		padding: var(--space-4);

		.quick-nav-container {
			.nav-title {
				font-size: var(--font-size-sm);
				margin-bottom: var(--space-3);
			}

			.nav-buttons {
				grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
				gap: var(--space-2);

				.nav-btn {
					padding: var(--space-3) var(--space-2);
					flex-direction: column;
					gap: var(--space-1);

					.nav-btn-icon {
						width: 4px;
						height: 4px;
					}

					.nav-btn-text {
						.nav-btn-title {
							font-size: var(--font-size-xs);
							margin-bottom: 0;
						}

						.nav-btn-subtitle {
							display: none; /* 移动端隐藏副标题 */
						}
					}
				}
			}
		}
	}

	.product-layout {
		flex-direction: column;
		padding: 0 var(--space-4) var(--space-16);
	}

	.products-content {
		width: 100%;
	}

	.products {
		.product-section {
			margin-bottom: var(--space-12);

			.container .section-title {
				font-size: var(--font-size-2xl);
				margin-bottom: var(--space-4);
			}

			.service-text p {
				font-size: var(--font-size-base);
			}
		}

		.subcategory-header {
			margin-bottom: var(--space-8);
			padding: var(--space-6) 0;

			.container h3 {
				font-size: var(--font-size-xl);
				margin-bottom: var(--space-3);
			}

			p {
				font-size: var(--font-size-sm);
			}
		}

		.product-card {
			padding: var(--space-6);
			margin-bottom: var(--space-10);

			.product-content {
				grid-template-columns: 1fr;
				gap: var(--space-8);

				&.reverse {
					.product-info,
					.product-image {
						order: unset;
					}
				}
			}

			.product-info {
				h3 {
					font-size: var(--font-size-xl);
					margin-bottom: var(--space-3);
				}

				p {
					font-size: var(--font-size-base);
				}
			}

			.product-image {
				max-height: 300px;
			}
		}
	}
}

@media (max-width: var(--breakpoint-md)) {
	.quick-nav {
		.quick-nav-container {
			.nav-buttons {
				grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

				.nav-btn {
					padding: var(--space-2);

					.nav-btn-text .nav-btn-title {
						font-size: 11px;
					}
				}
			}
		}
	}

	.product-layout {
		padding: 0 var(--space-3) var(--space-12);
	}

	.products {
		.product-section {
			margin-bottom: var(--space-10);

			.container .section-title {
				font-size: var(--font-size-xl);
			}
		}

		.subcategory-header {
			margin-bottom: var(--space-6);
			padding: var(--space-4) 0;

			.container h3 {
				font-size: var(--font-size-lg);
			}
		}

		.product-card {
			padding: var(--space-5);
			margin-bottom: var(--space-8);

			.product-content {
				gap: var(--space-6);
			}

			.product-info {
				h3 {
					font-size: var(--font-size-lg);
				}

				p {
					font-size: var(--font-size-sm);
				}
			}

			.product-image {
				max-height: 250px;
			}
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.quick-nav {
		.quick-nav-container {
			.nav-buttons {
				grid-template-columns: repeat(2, 1fr); /* 小屏幕两列 */
				gap: var(--space-1);

				.nav-btn {
					padding: var(--space-2) var(--space-1);

					.nav-btn-text .nav-btn-title {
						font-size: 10px;
						line-height: var(--line-height-tight);
					}
				}
			}
		}
	}

	.product-layout {
		padding: 0 var(--space-2) var(--space-10);
	}

	.products {
		.product-section {
			margin-bottom: var(--space-8);

			.container .section-title {
				font-size: var(--font-size-lg);
			}
		}

		.subcategory-header {
			margin-bottom: var(--space-4);
			padding: var(--space-3) 0;

			.container h3 {
				font-size: var(--font-size-base);
			}
		}

		.product-card {
			padding: var(--space-4);
			margin-bottom: var(--space-6);

			.product-content {
				gap: var(--space-4);
			}

			.product-info {
				h3 {
					font-size: var(--font-size-base);
				}

				p {
					font-size: var(--font-size-xs);
				}
			}

			.product-image {
				max-height: 200px;
			}
		}
	}
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
	.quick-nav .nav-btn {
		&:hover {
			transform: none;
			background: rgba(255, 255, 255, 0.5);
			color: var(--text-primary);
		}

		&:active {
			transform: scale(0.95);
			background: var(--brand-primary);
			color: var(--color-white);
		}
	}

	.product-card {
		&:hover {
			transform: none;
		}

		&:active {
			transform: scale(0.98);
		}

		.product-image:hover {
			transform: none;
		}
	}
}
</style>
